<template>

  <div class="exam-list-container" id="exam">

    <div class="exam-header">
      <h1>我的考试</h1>
      <el-button v-if="user.role=='1'" type="warning" icon="el-icon-circle-plus" @click="handleAddExam">添加考试</el-button>
    </div>

    <el-card class="box-card" v-for="exam in exams">
      <el-descriptions :title="exam.examName">
        <el-descriptions-item label="开始时间">{{ exam.startTime }}</el-descriptions-item>
        <el-descriptions-item label="考试时长">{{ exam.duration + '分钟' }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ exam.endTime }}</el-descriptions-item>
        <el-descriptions-item label="考试状态">
          <el-tag size="small" :type="getTagType(exam.status)">{{ getStatusStr(exam.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="总分">{{ exam.totalScore }}</el-descriptions-item>
        <el-descriptions-item label="及格分数">{{ exam.passScore }}</el-descriptions-item>
      </el-descriptions>
      <el-button v-if="user.role=='0'&&exam.status==1" size="medium" type="warning" @click="enterExam(exam)">进入考试
      </el-button>
      <el-button
          v-if="(user.role=='0'&&exam.status==2)||(user.role=='1'&&exam.status==1)||(user.role=='1'&&exam.status==2)"
          size="medium" type="primary" @click="showDetail(exam.id,exam.examName,true)">查看试卷
      </el-button>
      <el-button v-if="user.role=='1'&&exam.status==0" size="medium" type="success"
                 @click="showDetail(exam.id,exam.examName,false)">编辑试卷
      </el-button>
      <el-button v-if="user.role=='1'&&exam.status==0" size="medium" type="danger">删除考试
      </el-button>
    </el-card>


  </div>
  <!--  container结束  -->
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import {getExams} from "@/api/exam"
import eventBus from "@/utils/eventBus"

export default {
  name: "ExamList",
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      exams: []
    }
  },
  methods: {
    ...mapMutations(['examId', 'examName', 'isReadExam', 'exam']),
    handleAddExam() {

    },
    getStatusStr(status) {
      if (status == '0') {
        return '尚未开始'
      } else if (status == '1') {
        return '正在考试'
      } else if (status == '2') {
        return '考试结束'
      }
    },
    getTagType(status) {
      if (status == '0') {
        return ''
      } else if (status == '1') {
        return 'success'
      } else if (status == '2') {
        return 'danger'
      }
    },
    showDetail(eId, ename, isRead) {
      this.isReadExam(isRead)
      this.examId(eId)
      this.examName(ename)
      this.$router.push({name: 'examDetail'})
    },
    enterExam(exam) {
      this.$confirm('是否进入考试? 一旦进入请勿关闭网页，关闭网页将不会保留作答，请确保设备良好', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //自定义方法，共享数据
        this.exam(exam)
        this.$router.push({name: 'enterExam'})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消进入考试'
        });
      });

    }
  },
  mounted() {
    getExams().then(res => {
      this.exams = res
    })
  }

}
</script>

<style scoped lang="less">

.el-card {
  margin-bottom: 10px;
}

.exam-header {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

  h1 {
    font-size: 20px;
    margin-left: 10px;
  }

  .el-button {
    margin-right: 10px;
  }
}
</style>
